﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位发布变更管理</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.4/dist/vue.global.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus/dist/index.full.min.js"></script>
    <script src="https://unpkg.com/element-plus/dist/locale/zh-cn.min.js"></script>
    <style>
        .position-change {
            padding: 20px;
            background-color: #fff;
        }

        .breadcrumb {
            margin-bottom: 15px;
            font-size: 14px;
            color: #666;
        }

        .statistics {
            margin-bottom: 20px;
            font-size: 14px;
        }

        .position-table {
            margin-bottom: 20px;
        }

        .pagination {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 15px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <!-- 将el-dialog移到#app内部，确保在Vue实例作用域内 -->
    <div id="app">
       

        <!-- 页面主体内容 -->
        <div class="position-change">
            <!-- 面包屑导航 -->
            <div class="breadcrumb">
                <span>您正在做的业务是：</span>
                <span>人力资源 > 招聘管理 > 职位发布管理 > 职位发布变更</span>
            </div>

            <!-- 统计信息 -->
            <div class="statistics">
                当前可变更是职位发布总数：{{ rows }} 例
            </div>

            <!-- 职位列表 -->
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="first_kind_name" label="职位名称"></el-table-column>
                <el-table-column prop="second_kind_name" label="公司名称"></el-table-column>
                <el-table-column prop="human_amount" label="招聘人数"></el-table-column>
                <el-table-column prop="regist_time" label="发布时间"></el-table-column>
                <el-table-column prop="deadline" label="截止时间"></el-table-column>

                <el-table-column label="操作">
                    <template #default="scope">
                        <!-- 传递 mre_id 时确保与表格数据中的字段一致 -->
                        <el-button type="link" v-on:click ="Update(scope.row)">修改</el-button>
                        <el-button type="link" v-on:click="Delete(scope.row.mre_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <el-pagination v-model:current-page="currentPage"
                           v-model:page-size="pageSize"
                           :page-sizes="[2, 4, 6, 8, 10]"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="rows"
                           v-on:size-change="handleSizeChange"
            v-on:current-change ="handleCurrentChange"></el-pagination>
        </div>
    </div>

    <script type="text/javascript">
        // 从Vue导入所有必要的API
        const { createApp, ref, reactive, computed, onMounted } = Vue;
        // 从Element Plus导入Message组件
        const { ElMessage } = ElementPlus;

        const app = createApp({
            setup() {
                // 模态框显示状态
                const dialogVisible = ref(false);

                // 表格数据
                const tableData = ref([]);
                // 当前页
                const currentPage = ref(1);
                // 每页显示数
                const pageSize = ref(2);
                // 总行数
                const rows = ref(0);
                
                // 表单数据
                        const rowData = reactive({
            mre_id: null,             // 对应后端 mre_id（int）
            first_kind_id: '',        // 原 firstKindId（I级机构，int）
            first_kind_name: '',      // 原 firstKindName（string）
            second_kind_id: '',       // 原 secondKindId（II级机构，int）
            second_kind_name: '',     // 原 second_kind_name（string）
            third_kind_id: '',        // 原 thirdKindId（III级机构，int）
            third_kind_name: '',      // 新增：对应后端 third_kind_name（string）
            engage_type: '',          // 原 engageType（招聘类型，string）
            major_kind_id: '',        // 原 majorKindId（职位分类，int）
            major_kind_name: '',      // 新增：职位分类名称（string）
            major_id: '',             // 原 majorId（职位名称ID，int）
            major_name: '',           // 原 majorName（职位名称，string）
            human_amount: null,       // 原 humanAmount（招聘人数，int）
            deadline: null,           // 原 dateStart（截止日期，建议改为 datetime 类型）
            register: 'zhangsan',     // 登记人（string）
            changer: '',              // 新增：变更人（后端可能需要记录）
            regist_time: '',          // 原 registTime（登记时间，datetime）
            change_time: '',          // 新增：变更时间（后端自动生成）
            major_describe: '',       // 原 majorDescribe（职位描述，string）
            engage_required: '',      // 原 engage_required（招聘要求，string）
            name: ''                  // 可能为职位名称别名（string）
        });

                // 表单验证规则
                       const rules = reactive({
          first_kind_id: [{ required: true, message: '请选择I级机构', trigger: 'change' }], // 修正字段名
          engage_type: [{ required: true, message: '请选择招聘类型', trigger: 'change' }], // 修正字段名
          major_kind_id: [{ required: true, message: '请选择职位分类', trigger: 'change' }], // 修正字段名
          major_id: [{ required: true, message: '请选择职位名称', trigger: 'change' }],
          human_amount: [
            { required: true, message: '请填写招聘人数', trigger: 'blur' },
            { type: 'number', message: '招聘人数必须为数字', trigger: 'blur' },
            { min: 1, message: '人数不能少于1', trigger: 'blur' } // 新增最小值验证
          ],
          deadline: [{ required: true, message: '请选择截止日期', trigger: 'change' }] // 修正字段名（原 dateStart）
        });
                // 级联选择数据
                const firstKindOptions = ref([
                    { value: '01', label: '集团' },
                    { value: '02', label: '总部' }
                ]);

                const secondKindOptions = ref([]);
                const thirdKindOptions = ref([]);

                // 职位分类数据
                const majorKindOptions = ref([
                    { value: '01', label: '销售' },
                    { value: '02', label: '软件开发' },
                    { value: '03', label: '人力资源' },
                    { value: '04', label: '生产部' }
                ]);

                const majorOptions = ref([]);

                // 当前时间计算
                const currentTime = computed(() => {
                    const now = new Date();
                    return `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
                });

                // I级机构变化处理
                       const handleFirstKindChange = (value) => {
          rowData.first_kind_id = value; // 同步更新表单数据
          rowData.second_kind_id = ''; // 清空下级机构
          secondKindOptions.value = value === '01'
            ? [{ value: '0101', label: '集团子公司A' }, { value: '0102', label: '集团子公司B' }]
            : value === '02'
              ? [{ value: '0201', label: '总部部门A' }, { value: '0202', label: '总部部门B' }]
              : [];
        }
                // 职位分类变化处理
                const handleMajorKindChange = (value) => {
                    rowData.majorId = '';
                    majorOptions.value = value === '01' ? [
                        { value: '11', label: '区域经理' },
                        { value: '12', label: '销售专员' }
                    ] : value === '02' ? [
                        { value: '21', label: '前端开发' },
                        { value: '22', label: '后端开发' }
                    ] : [];
                };

                // 删除职位
                function Delete(mre_id) {
                    if (confirm('确定要删除吗？')) {
                        axios.delete(`/Text/Delete/${mre_id}`)
                            .then(() => {
                                ElMessage.success("删除成功");
                                fill(); // 删除成功后重新加载数据
                            })
                            .catch((error) => {
                                console.error("删除资源时出错", error);
                            });
                    }
                }

                        
                const Update = (rowData) => {
            console.log("修改数据:", rowData);

            // 将数据对象序列化为JSON字符串并编码
            const encodedData = encodeURIComponent(JSON.stringify(rowData));

            // 使用Razor生成基础URL，拼接查询参数
            const baseUrl = '@Url.Action("Update1", "Text")';
            const urlWithParams = `${baseUrl}?data=${encodedData}`;

            window.location.href = urlWithParams;
        };

                // 重置表单
                function resetForm() {
                    rowData.firstKindId = '';
                    rowData.secondKindId = '';
                    rowData.thirdKindId = '';
                    rowData.engageType = '';
                    rowData.majorKindId = '';
                    rowData.majorId = '';
                    rowData.humanAmount = null;
                    rowData.dateStart = null;
                    rowData.majorDescribe = '';
                    rowData.engageRequired = '';
                }

                // 填充表格数据
                function fill() {
                    axios.get('/Text/Updatefy', {
                        params: {
                            currentPage: currentPage.value,
                            pageSize: pageSize.value
                        }
                    }).then(res => {
                        tableData.value = res.data.list;
                        rows.value = res.data.rows;
                    }).catch(err => {
                        console.error(err);
                    });
                }

                // 处理分页大小变化
                function handleSizeChange(size) {
                    pageSize.value = size;
                    fill();
                }

                // 处理页码变化
                function handleCurrentChange(cpage) {
                    currentPage.value = cpage;
                    fill();
                }

                // 提交表单
                const handleSubmit = () => {
                    formRef.value.validate((valid) => {
                        if (valid) {
                            // 这里替换为实际的API请求
                            console.log('提交的变更数据:', rowData);

                            // 模拟成功提示
                            ElMessage.success('变更提交成功');
                            dialogVisible.value = false;
                        }
                    });
                };

                // 初始化加载数据
                onMounted(() => {
                    fill();
                });

                return {
                    dialogVisible,
                    tableData,
                    currentPage,
                    pageSize,
                    rows,
                    rowData,
                    rules,
                    firstKindOptions,
                    secondKindOptions,
                    thirdKindOptions,
                    majorKindOptions,
                    majorOptions,
                    Delete,
                    Update,
                    handleSizeChange,
                    handleCurrentChange,
                    handleSubmit,
                    handleFirstKindChange,
                    handleMajorKindChange
                };
            }
        });

        // 配置Element Plus中文语言
          app.use(ElementPlus, {
            locale: ElementPlusLocaleZhCn
        });

        // 正确挂载应用
        app.mount('#app');
    </script>
</body>
</html>